<template>
  <van-popup v-model:show="props.show" position="bottom" class="popup">
    <a-typography-title :level="4" class="w">
      <img
        src="@/assets/left-s-line.png"
        class="left-s-line"
        @click="closeShow"
      />
      确认领取方式
    </a-typography-title>
    <a-flex justify="space-between" class="itemCcc">
      <div class="nickLabel">物流方式</div>
      <div class="nickRight" align="center" @click="handleClick(1)">
        <a-typography-text>{{ wlfs }}</a-typography-text>
        <img src="@/assets/328.png" class="img20" />
      </div>
    </a-flex>
    <div class="information" v-if="wlfs == '快递寄送'">
      <div class="nickLabel">收货地址</div>
      <div class="shdz" @click="handleClick(2)">
        <div v-if="KDJSdataList.length != 0" style="width: 80%">
          <p class="slh">
            {{ information.province }} {{ information.city }}
            {{ information.county }}
            {{ information.addressDetail }}
          </p>
          <div class="lc">
            <p>{{ information.addressName }}</p>
            <p class="ml10">{{ information.tel }}</p>
          </div>
        </div>
        <div v-else class="tc">您尚未维护收货地址，请点击设置</div>
        <img src="@/assets/328.png" class="img20" />
      </div>
    </div>
    <div class="information" v-if="wlfs == '门店自提'">
      <div class="nickLabel">门店地址</div>
      <div class="shdz" @click="handleClick(3)">
        <div v-if="mdzt.storeName == null" class="djsz">
          <img src="@/assets/21.png" class="img16" />
          您尚未选择门店，请点击设置
        </div>
        <div style="width: 80%">
          <p class="slh">{{ mdzt.storeName }}</p>
          <p class="slh">{{ mdzt.storeAddress }}</p>
        </div>
        <img src="@/assets/328.png" class="img20" />
      </div>
    </div>
    <a-flex>
      <van-button type="default" class="qx" block @click="closeShow"
        >取消</van-button
      >
      <van-button type="default" class="qrtj" block @click="submit"
        >确认提交</van-button
      >
    </a-flex>
  </van-popup>
  <!-- 物流方式弹框 -->
  <van-popup v-model:show="showWL" position="bottom" class="popup">
    <van-picker
      :columns="columns"
      @cancel="showWL = false"
      @confirm="onConfirm"
    />
  </van-popup>
  <!-- 快递寄送 -->
  <van-popup v-model:show="showKDJS" position="bottom" class="popup">
    <a-typography-title :level="4" class="w"> 收货地址 </a-typography-title>
    <van-radio-group class="radioGroup" v-model="checkedKDJS">
      <van-cell-group inset>
        <van-cell clickable v-for="(item, index) in KDJSdataList" :key="index">
          <div>
            <div class="lc">
              <p>姓名：{{ item.addressName }}</p>
              <p>手机号：{{ item.tel }}</p>
            </div>
            <p>地址：{{ item.addressDetail }}</p>
          </div>
          <template #right-icon>
            <van-radio :name="item.id" checked-color="#3C7058" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <a-flex>
      <van-button type="default" class="qx" block @click="showKDJS = false"
        >取消</van-button
      >
      <van-button type="default" class="qrtj" block @click="mdqr(1)"
        >确认</van-button
      >
    </a-flex>
  </van-popup>
  <!-- 门店 -->
  <van-popup v-model:show="showMD" position="bottom" class="popup">
    <a-typography-title :level="4" class="w"> 门店列表 </a-typography-title>
    <van-radio-group class="radioGroup" v-model="checked">
      <van-cell-group inset>
        <van-cell clickable v-for="(item, index) in MDdataList" :key="index">
          <van-card :desc="item.storeAddress" :title="item.storeName">
          </van-card>
          <template #right-icon>
            <van-radio :name="item.id" checked-color="#3C7058" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <a-flex>
      <van-button type="default" class="qx" block @click="showMD = false"
        >取消</van-button
      >
      <van-button type="default" class="qrtj" block @click="mdqr(2)"
        >确认</van-button
      >
    </a-flex>
  </van-popup>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant'
import { getSystemStore, addressList, addOrder } from '@/api/api'
const router = useRouter()
const route = useRoute()
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  qyRow: {
    type: Object,
    default: () => ({}),
  },
  goodsDetail: {
    type: Object,
    default: () => ({}),
  },
})

const columns = ref(['快递寄送', '门店自提'])
const checked = ref('')
const showWL = ref(false)
const wlfs = ref('快递寄送')
const checkedKDJS = ref('')
const information = ref({})
const mdzt = ref({})
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const MDdataList = ref([])
const KDJSdataList = ref([])
const showMD = ref(false)
const showKDJS = ref(false)
watch(
  () => props.show,
  (newVal, oldVal) => {
    if (newVal) {
      getList()
    }
  }
)
const getList = async () => {
  // 门店列表
  const res = await getSystemStore()
  if (res.code == 200) {
    MDdataList.value = res.rows
    if (MDdataList.value.length == 0) {
      columns.value = ['快递寄送']
    }
  }
  // 地址列表
  const resA = await addressList({ memberId: userInfo?.id })
  if (resA.code == 200) {
    KDJSdataList.value = resA.rows
    // 默认地址
    information.value =
      resA.rows.filter((i) => {
        return i.memberDefault == 1
      })[0] || {}
  }
}
const emit = defineEmits(['closeShow'])

//   确认提交
const submit = () => {
  let p = {
    memberId: userInfo?.id,
    memberName: userInfo?.memberName,
    raiId: '', //权益ID
    raiName: '', //权益名称
    payment: 0,
    goodsId: '',
    raiOrderNum: '', //权益数量
  }
  if (route.path == '/vip') {
    p.raiId = props.qyRow.id
    p.raiName = props.qyRow.raiName
    p.goodsId = props.qyRow.raiGoodsParam.slice(1, -1)
    p.raiOrderNum = props.qyRow.raiNum
  } else {
    p.raiId = JSON.parse(route.query.qyRow).id
    p.raiName = JSON.parse(route.query.qyRow).raiName
    p.goodsId = props.goodsDetail.id
    p.raiOrderNum = route.query.raiOrderNum
  }

  if (wlfs.value == '快递寄送') {
    if (!information.value || Object.keys(information.value).length === 0) {
      Toast.fail('请选择收货地址')
      return false
    } else {
      p.payment = 0
      p.addressId = information.value.id //地址ID
    }
  } else {
    if (checked.value == '') {
      Toast.fail('请选择门店')
      return false
    } else {
      p.payment = 1
      p.storeId = mdzt.value.id //门店ID
      p.storeName = mdzt.value.storeName
    }
  }
  addOrder(p).then((res) => {
    if (res.code == 200) {
      Toast.success('提交成功')
      closeShow()
      if (route.path == '/vip') {
        router.go(0)
      } else {
        router.push({ path: '/vip' })
      }
    } else {
      Toast.fail(res.msg)
    }
  })
}
const closeShow = () => {
  emit('closeShow')
}
const handleClick = async (v) => {
  switch (v) {
    case 1:
      showWL.value = true
      break
    case 2:
      if (KDJSdataList.value.length == 0) {
        router.push({ path: '/address' })
      } else {
        showKDJS.value = true
        KDJSdataList.value.forEach((item) => {
          if (information.value.id == item.id) {
            checkedKDJS.value = item.id
          }
        })
      }
      break
    case 3:
      showMD.value = true
      break
  }
}
const onConfirm = (values) => {
  showWL.value = false
  wlfs.value = values
}

const mdqr = (c) => {
  if (c == 1) {
    if (checkedKDJS.value) {
      information.value = KDJSdataList.value.filter((item) => {
        return item.id == checkedKDJS.value
      })[0]
      showKDJS.value = false
    }
  } else {
    showMD.value = false
    if (checked.value) {
      mdzt.value = MDdataList.value.filter((item) => {
        return item.id == checked.value
      })[0]
      showKDJS.value = false
    }
  }
}
</script>
<style scoped lang='less'>
.header {
  text-align: center;
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid #ccc;

  .left-s-line {
    width: 20px;
    position: absolute;
    left: 10px;
    top: 15px;
  }
}

:deep(.van-cell--clickable:active) {
  background-color: #fff !important;
}

:deep(.van-cell-group) {
  margin: 0;
}

:deep(.van-card) {
  padding: 0 !important;
  background-color: #fff !important;
  font-size: 16px !important;

  .van-card__desc {
    margin-top: 10px;
  }

  .van-card__content {
    min-height: 50px;
  }

  .van-card__footer {
    text-align: left;
    margin-top: 10px;
  }
}

.add {
  position: absolute;
  bottom: 0;
  left: 0;
}

.anbu {
  display: flex;
  height: 69px;
  background: #3c7058;
}

.popup {
  height: 30%;
  .w {
    text-align: center;
    margin: 0;
    padding: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    text-align: center;
    font-style: normal;
    height: 60px;
    .left-s-line {
      width: 20px;
      position: absolute;
      left: 16px;
      top: 16px;
    }
  }

  .e {
    margin-bottom: 10px;
  }
}

.num {
  font-size: 20px;
  font-weight: bold;
  color: #ff6657;
}

.itemCcc {
  display: flex;
  flex-direction: column;

  .nickRight {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 54px;
    padding: 16px;
  }
}

.information {
  .shdz {
    width: 100%;
    height: 100px;
    display: flex;
    font-size: 16px;
    padding: 16px;
    justify-content: space-between;
    .slh {
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    .lc {
      display: flex;
    }
    .djsz {
      width: 840px;
      height: 30px;
      background: rgba(215, 133, 94, 0.1);
      border-radius: 8px;
      padding: 5px;
      margin-left: 20px;
      overflow: hidden; /* 隐藏超出部分 */
    }
  }
}
.nickLabel {
  width: 100%;
  height: 54px;
  background: #fcfaf4;
  padding: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
.tc {
  text-align: center;
  width: 100%;
  font-size: 16px;
}
.qx {
  height: 68px;
  background: #fcfaf4;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
.qrtj {
  height: 68px;
  background: #3c7058;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
.radioGroup {
  max-height: 200px;
  overflow-y: auto;
}
</style>